<!--
 * @Description: 表格字段配置
-->
<template>
  <div v-loading="loading">
    <el-checkbox-group v-model="checkList">
      <draggable
        v-model="columnList"
        group="site"
        animation="300"
        class="contain"
        @end="end"
        @change="handleChange"
      >
        <div v-for="item,index in columnList" :key="index" class="items">
          <el-checkbox :label="item.label">
            <span class="field">{{ item.label }}</span>
            <span class="icon">
              <i class="el-icon-sort"></i>
            </span>
          </el-checkbox>
        </div>
      </draggable>
    </el-checkbox-group>
    <!-- <div slot="footer" class="dialog-footer">
      <el-button class="zh-button-one" @click="cancel">
        取 消
      </el-button>
      <el-button
        class="zh-button-two"
        type="primary"
        @click="save"
      >
        保 存
      </el-button>
    </div> -->
  </div>
</template>

<script>
import draggable from "vuedraggable";
import tableApi from "@/api/basic-info-manage/table-config";

export default {
  name: "tableColumn",
  components: { draggable },
  
  props: {
    tableColumn: {
      type: Array,
      default: []
    },
    pathsuffix: {
      type: Number
    }
  },
  data() {
    return {
      loading: false,
      columnList: [],
      checkList: []
    };
  },
  watch: {},
  mounted() {
    this.columnList = [ ...this.tableColumn ]
    this.loadSaveColumn()
  },
  methods: {
    handleChange(val) {},
    end() {},
    // 获取保存的配置
    loadSaveColumn() {
      let path = this.$route.path
      // if (['/production-batch-query', '/create-production-batch'].includes(path)) {
      //   path = path + this.pathsuffix
      // }

      this.loading = true
      tableApi.queryByUrlAndAccountAndOrganizationNo(path).then(res => {
        this.loading = false
        let fieldContentStr = res.data?.fieldContentStr;
        let fieldContent = fieldContentStr && JSON.parse(fieldContentStr);
        if (fieldContent) {
          let checkList = []
          fieldContent.map(el => {
            el.show && checkList.push(el.label)
          })
          this.checkList = checkList
          // 新增的字段
          this.columnList.map(el => {
            let row = fieldContent.find(ele => {
              return ele.prop === el.prop
            })
            if (!row) {
              fieldContent.push(el)
            }
          })
          this.columnList = fieldContent
        } else { // 未保存过使用默认数据
          this.checkList = this.tableColumn.map(el => { return el.label })
        }
      })
    },
    save() {
      let newList = []
      this.columnList.map(el => {
        el.show = this.checkList.includes(el.label)
        newList.push(el)
      })
      
      let path = this.$route.path
      // if (['/production-batch-query', '/create-production-batch'].includes(path)) {
      //   path = path + this.pathsuffix
      // }
      tableApi.bind({
        url: path,
        account: sessionStorage.account,
        organizationNo: sessionStorage.organizationNo,
        fieldContentStr: JSON.stringify(newList)
      }).then(res => {
        if (res.code === 1) {
          this.$message.success(res.msg);
          this.$emit("cancelColumn", true);
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    cancel() {
      this.$emit('cancelColumn')
    }
  }
};
</script>
<style scoped lang="scss">
.contain {
  width: 100%;

  .items {
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #bfbfbf;
    border-top: none;
    &:first-child {
      border-top: 1px solid #bfbfbf;
    }

    ::v-deep .el-checkbox {
      width: 100%;

      .el-checkbox__label {
        width: 80%;
      }
      
      .field {
        width: 70%;
        display: inline-block;
        text-align: center;
      }
    }
    ::v-deep .icon {
      width: 200px;
      display: inline-block;
      text-align: center;
    }
  }
}
</style>
